<template>
  <div class="networkNet">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-date-picker
              v-model="value"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="|"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:300px;"
              @change="handleFilter"
            />
            <el-select v-model="option1" style="width:120px;" @change="handleFilter">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="keyword"
              placeholder="关键字"
              style="width:260px"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
            <el-button style="background-color:#e9ab3e;color:#fff;" @click="handleExport">导出</el-button>
          </el-col>
        </el-row>
      </section>
      <ul class="netcheck">
        <li>
          收入 :
          <span>{{ income }}</span> 农商币
        </li>
        <li>
          支出 :
          <span>{{ outcome }}</span> 农商币
        </li>
        <p>汇率: 1元 = 1农商币</p>
      </ul>
      <subtable
        :table-label="tableLabel"
        :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
        :manage="manage"
      >
        <el-table-column slot="isPro" label="用户名" align="center" min-width="10">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column slot="isEnd" label="成交时间" align="center" min-width="10">
          <template slot-scope="scope">
            <span>{{ scope.row.createTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column slot="button" label="网校收入" align="center" min-width="10">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'inflow'">+</span>
            <span v-if="scope.row.type === 'outflow'">-</span>
            <span>{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
      </subtable>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <net-dialog
        :visiabledialog="netDialog"
        :dialog-data="netData"
        @changeVisiable="netDialog = false"
      />
    </div>
  </div>
</template>

<script>
import NetDialog from '@/components/Dialog'
import Subtable from '@/components/Eltable'
import Pagination from '@/components/Pagination' // 分页组件
import { getCashFlowList } from '@/api/deal/cashFlow' // 数据接口
import { getUserDetail } from '@/api/deal/userDetail' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    Subtable,
    Pagination,
    NetDialog
  },
  data() {
    return {
      netDialog: false,
      netData: {},
      total: 0,
      currentpage: 1,
      pagesize: 10,
      income: '0',
      outcome: '0',
      manage: {
        title: '查看'
      },
      tableLabel: [
        {
          label: '流水号', width: '10', prop: 'sn'
        }, {
          label: '名称', width: '10', prop: 'name'
        }, {
          label: '交易号/订单号', width: '10', prop: 'number'
        }
      ],
      tableData: [
        {
          username: '教育'
        }
      ],
      listFilter: [],
      value: [],
      keyword: '',
      option1: '',
      options1: [
        {
          label: '选择类型',
          value: ''
        },
        {
          label: '用户名',
          value: '用户名'
        },
        {
          label: '流水号',
          value: '流水号'
        },
        {
          label: '订单号',
          value: '订单号'
        },
        {
          label: '名称',
          value: '名称'
        },
        {
          label: '交易号',
          value: '交易号'
        }
      ],
      picker: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getData()
  },
  updated() {
    this.statusfil()
  },
  methods: {
    statusfil() {
      let income = 0
      let outcome = 0
      this.tableData.map(item => {
        if (item.type === 'inflow') income += item.amount
        if (item.type === 'outflow') outcome += item.amount
      })
      this.income = income
      this.outcome = outcome
    },
    handleClickDialog(scope) {
      this.netDialog = true
      getUserDetail(scope.row.userId).then(response => {
        this.netData = response.data.item
      })
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleFilter() {
      this.tableData = this.listFilter.filter(item => {
        if (this.value && (new Date(item.createTime) < this.value[0] || new Date(item.createTime) > this.value[1])) return false
        if (this.option1 === '用户名' && item.userName.toLowerCase().indexOf(this.keyword.toLowerCase()) === -1) return false
        if (this.option1 === '流水号' && item.sn.toString().toLowerCase().indexOf(this.keyword.toLowerCase()) === -1) return false
        if (this.option1 === '订单号' && item.orderSn.toString().toLowerCase().indexOf(this.keyword.toLowerCase()) === -1) return false
        if (this.option1 === '名称' && item.name.toLowerCase().indexOf(this.keyword.toLowerCase()) === -1) return false
        if (this.option1 === '交易号' && item.tradeSn.toString().toLowerCase().indexOf(this.keyword.toLowerCase()) === -1) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.value = []
      this.option1 = ''
      this.getData()
    },
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['流水号', '名称', '交易号/订单号', '用户名', '成交时间', '网校收入']
        const filterVal = ['sn', 'name', 'number', 'userName', 'createTimeStr', 'amount']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'coinBillList',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    getData() {
      this.listLoading = true
      getCashFlowList('Coin').then(response => {
        this.tableData = response.data.items.filter(item => {
          if (item.tenantId !== getTenantId()) return false
          return true
        })
        this.tableData.map((item) => {
          item.number = '交易号：' + ((item.tradeSn === undefined) ? '----' : item.tradeSn) + '\n' + '订单号：' + ((item.orderSn === undefined) ? '----' : item.orderSn)
          item.createTimeStr = new Date((item.createTime)).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
        })
        this.listFilter = this.tableData
        this.total = this.tableData.length
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
.networkNet {
  .allsearch {
    margin-top: 0px;
    padding: 0;
    .search-content {
      width: 100%;
    }
    .el-table .cell {
      white-space: pre-wrap;
    }
    .el-table td:nth-child(3) {
      text-align: left;
    }
  }
  .netcheck {
    list-style: none;
    padding: 0;
    padding-left: 11px;
    margin: 0;
    margin-bottom: 21px;
    margin-top: 14px;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    background-color: #f8f8f8;
    li {
      float: left;
      display: block;
      margin-right: 20px;
      color: #72726f;
      span {
        color: rgb(15, 202, 62);
        font-weight: 600;
      }
    }
  }
  p {
    float: right;
    padding: 0;
    margin: 0;
    color: #8e8e8e;
  }
}
</style>
